<template>
	<base-page @lowerCall="timeLowerCall" class="ceshi">
		<view slot="header" class="bg-orange-red">
			<cu-custom :isBack="true"><block slot="content">限时秒杀</block></cu-custom>
			<view class="timeList">
				<view class="cu-item flex-sub " :class="index == TabCur ? 'text-white cur' : ''" v-for="(item, index) in timeList" :key="index" @tap="tabSelect(item, index)">
					<view class="time">{{ item.timeshow }}</view>
					<view class="timeTxt">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<view slot="center" class="section bg-gray">
			<view class="goodsList">
				<view class="goodsItem df-cen-rl" v-for="(item, idx) in seckillData" :key="idx" >
					<view class="goods" @click="goodsBtnTwo(item)"><image :src="item.sku_image" mode="" /></view>
					<view class="goodsRight" @click="goodsBtnTwo(item)">
						<view class="goodsName">{{ item.sku_name }}</view>
						<view class="goodsDescribe">{{ item.introduction }}</view>
						<view class="goodsBottom df-cen-rl ">
							<view class="goodsPrice df-cen-rl">
								<view class="newPrice">
									<text>￥</text>
									{{ item.seckill_price }}
								</view>
								<view class="oldPrice">￥{{ item.price }}</view>
							</view>
							<view class="goodsBtn bg-grey" :class="{ 'bg-gradual-orange': item.state == 1 }" @click="goodsBtn(item)">去抢购</view>
						</view>
					</view>
				</view>
				<view class="blank" v-if="throttleType">加载中....</view>
				<view class="blank" v-if="total != null && total <= seckillObj.page * seckillObj.page_size && !throttleType">没有更多了....</view>
			</view>
		</view>
	</base-page>
</template>

<script>
export default {
	data() {
		return {
			TabCur: 0,
			page: 1,
			seckillData: [],
			goodsList: [
				{
					pic: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/setting/avatar.png',
					name: '橙'
				}
			],
			seckillObj: {
				seckill_id: null,
				site_id: 0,
				page: 1,
				page_size: 10
			},
			total: null,
			throttleType:false,
			timeList: [],
			seckillType: 0
		};
	},
	onLoad(e) {},
	onShow(e) {},
	methods: {
		// 加载更多
		loadMore() {
			// console.log(11);
		},
		// 获取秒杀tab栏
		getSecKillTime() {
			this.$Apis.seckilTiem().then(res => {
				// console.log(res.list);
				this.timeList = res.list;
				this.timeList = res.list.map((v, i) => {
					let end = new Date(this.$Utils.dateStr('', false)).getTime() + v.seckill_end_time * 1000;
					let start = new Date(this.$Utils.dateStr('', false)).getTime() + v.seckill_start_time * 1000;
					
					// console.log("this.$Utils.countdown(v.seckill_end_time)",this.$Utils.countdown(v.seckill_end_time))
					
					// 结束了
					// console.log(end, '结束', start, '开始');
					if (end < new Date().getTime()) {
						// console.log('结束了', v);
						v['state'] = 0;
						v['title'] = '已结束';
					}

					// 未开始
					if (start > new Date().getTime()) {
						v['state'] = 2;
						v['title'] = '未开始';
					}
					// 进行中
					if (end > new Date().getTime() && start < new Date().getTime()) {
						// console.log('进行中', v);
						v['state'] = 1;
						v['title'] = '已开抢';
						if (this.seckillObj.seckill_id != null && this.seckillObj.seckill_id != v.seckill_id) {
							this.seckillObj.page = 1;
						}
						this.seckillObj.seckill_id = v.seckill_id;
						this.seckillType = 1;
						// console.log(this.seckillType, '秒杀状态');
						this.TabCur = i;
					} else {
						this.seckillObj.seckill_id = this.timeList[0].seckill_id;
					}
					v['timeshow'] = v.seckill_start_time_show.substring(0, v.seckill_start_time_show.length - 3);
					return v;
				});
				this.getSeckillList();
			});
		},
		// 获取秒杀列表
		getSeckillList() {
			this.throttleType = true
			this.$Apis.getSeckillGoods(this.seckillObj).then(res => {
				this.throttleType = false
				if (this.seckillObj.page == 1) {
					this.seckillData = [];
				}
				let newArr = res.list.map(v => {
					let end = new Date(this.$Utils.dateStr('', false)).getTime() + v.seckill_end_time * 1000;
					let start = new Date(this.$Utils.dateStr('', false)).getTime() + v.seckill_start_time * 1000;
					// 结束了
					// console.log(end, '结束', start, '开始');
					if (end < new Date().getTime()) {
						console.log('结束了', v);
						v['state'] = 0;
						v['title'] = '已结束';
					}

					// 未开始
					if (start > new Date().getTime()) {
						v['state'] = 2;
						v['title'] = '未开始';
					}
					// 进行中
					if (end > new Date().getTime() && start < new Date().getTime()) {
						v['state'] = 1;
						v['title'] = '已开抢';
					}

					return v;
				});
				this.total = res.count
				this.seckillData = this.seckillData.concat(newArr);
				// console.log(res);
			});
		},
		tabSelect(val, inx) {
			// if (val.state == 1) {

			// }
			this.TabCur = inx;
			this.seckillObj = {
				seckill_id: val.seckill_id,
				site_id: 0,
				page: 1,
				page_size: 10
			};
			this.getSeckillList();
		},
		// 秒杀商品跳转
		goodsBtn(val) {
			let end = new Date(this.$Utils.dateStr('', false)).getTime() + val.seckill_end_time * 1000;
			let start = new Date(this.$Utils.dateStr('', false)).getTime() + val.seckill_start_time * 1000;
			if (end > new Date().getTime() && start < new Date().getTime()) {
				this.$Router.push({
					path: '/shopPages/goods/seckill',
					query: {
						goods_id: val.id,
						type:val.sku_spec_format!=''? 1:''
					}
				});
			} else {
				this.$Utils.tip('未到秒杀时间');
			}
		},
		goodsBtnTwo(val){
			this.$Router.push({
				path: '/shopPages/goods/seckill',
				query: {
					goods_id: val.id,
					type:val.sku_spec_format!=''? 1:''
				}
			});
		},
		// 滚动到底部
		timeLowerCall() {
			// seckillObj: {
			// 	seckill_id: null,
			// 	site_id: 0,
			// 	page: 1,
			// 	page_size: 10
			// },
			if(!this.throttleType && this.total != null && this.total > this.seckillObj.page * this.seckillObj.page_size) {
				this.seckillObj.page++
				this.getSeckillList();
			}
			// console.log('log滚动到底部');
		}
	},
	mounted() {
		this.seckillObj.site_id = this.$Router.queryObj().site_id
		this.getSecKillTime();
	}
};
</script>

<style lang="scss">
.scroll-seckill {
	white-space: nowrap;
	width: 100%;
	height: 100%;
	left: 50%;
	position: absolute;
	top: 120px;
	transform: translateX(-50%);
	z-index: 99;
}
/deep/.cur {
	position: relative;
	&::after {
		content: '';
		position: absolute;
		background-color: #fff;
		top: 43px;
		left: 50%;
		transform: translateX(-50%);
		width: 30%;
		height: 3px;
	}
}
.time-content {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 100px 15px 0;
	height: 100%;
}
.ceshi {
	background-image: url(https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/activity/limitbgc.png);
	background-size: 100% 280rpx;
	background-repeat: no-repeat;
	background-position: 0 0;
}
.timeList {
	width: 100%;
	color: rgb(241, 238, 238);
	display: flex;
	justify-content: space-between;
	padding: 20px 15px;
	text-align: center;
	.time {
		font-size: 18px;
	}
	.timeTxt {
		font-size: 10px;
	}
}
.section {
	min-height: 100%;
	padding-top: 20rpx;
}
.goodsList {
	.blank {
		padding: 20px 0;
		width: 100%;
		text-align: center;
	}

	padding: 0 10px;
	height: 100%;
	.goodsItem {
		padding: 10px;
		border-radius: 12px;
		background-color: #fff;
		margin-bottom: 10px;
		align-items: start;
		.goods {
			width: 100px;
			height: 100px;
			background-color: #f4f4f4;
			margin-right: 10px;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.goodsRight {
			overflow: hidden;
			flex: 1;
			.goodsName {
				font-size: 16px;
				margin-bottom: 5px;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2; //多行在这里修改数字即可
				/* autoprefixer: ignore next */
				-webkit-box-orient: vertical;
				display: -webkit-box;
				overflow: hidden;
			}
			.goodsDescribe {
				font-size: 12px;
				color: #fd3b5c;
				margin-bottom: 20px;
			}
			.goodsBottom {
				.goodsPrice {
					font-size: 18px;
					color: #ff2342;
					text {
						font-size: 10px;
					}
				}
				.oldPrice {
					font-size: 10px;
					color: lightgray;
					text-decoration: line-through;
				}
				.goodsBtn {
					font-size: 14px;
					text-align: center;
					color: white;
					width: 80px;
					height: 40px;
					line-height: 40px;
					border-radius: 6px;
				}
			}
		}
	}
}
</style>
